<template>
    <div
        class="simple-card-container"
        :style="cardCss">
        <h3
            :style="{
                'fontSize': data.options.titleFontSize
            }"
        >{{ data.options.titleDefaultValueCName }}</h3>
        <p class="desc">{{ data.options.defaultValueCName }}</p>
        <div class="card-svg" />
    </div>
</template>
<script>
export default {
    name: 'SimpleCard',
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        cardCss() {
            return {
                'background': 'linear-gradient(to ' + this.data.options.direction + ', ' + this.data.options.color1 + ', ' + this.data.options.color2 + ')',
                'color': this.data.options.color,
                'fontSize': this.data.options.fontSize
            }
        }
    }
}
</script>
